{% load staticfiles %}
{% include "header.html" %}

<div id='image-list' class='container de-container'>

</div>
<div id="more-card" style="text-align: center;height: 40px;font-size: 16px">正在加载更多</div>

<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript">
    (function () {
        $('.nav__trigger').on('click', function (e) {
            e.preventDefault();
            $('.nav').toggleClass('nav-active-x');
            $('#nav_trigger_parent').toggleClass('nav-trigger-active')
        });
    }())
</script>

<script type="text/javascript">
    (function () {
        var pc = 0;
        var norunning = 1;
        var fuck = function () {
            if (norunning == 1) {
                norunning = 0;
                var d1 = document.getElementById('image-list');
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == XMLHttpRequest.DONE) {
                        if(xmlhttp.responseText != "fail") {
                            d1.insertAdjacentHTML('beforeend', xmlhttp.responseText);
                            pc = pc + 1;
                        }else{
                            $('#more-card').text('已经到底了^ ^')
                        }
                        norunning = 1;
                    }
                };
                xmlhttp.open("GET", "/images/page?page=" + pc, true);
                xmlhttp.send();
            }
        }
        var winH = $(window).height()
        var scrollHander = function(){
            var pageH = $(document.body).height();
            var scrollT = $(window).scrollTop();
            var aa = (pageH - winH - scrollT-60)/winH;
            if(aa < 0.08){
                fuck()
            }
        }
        fuck()

        $(window).scroll(scrollHander)
    }())
</script>

</body>
</html>